<template>
  <!-- 大屏生产数据表单弹窗 -->
  <el-dialog
    v-model="visibleDialog"
    title="生产顺序调整"
    width="1400px"
    draggable
    @close="closeDialog"
  >
    <el-form :model="searchParam" :inline="true">
      <el-form-item label="生产日期">
        <el-date-picker
          v-model="searchParam.productionDate"
          type="date"
          placeholder="请选择生产日期"
          value-format="YYYY-MM-DD"
          :clearable="false"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search"
          ><i-ep-search />搜索</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      ref="dataTableRef"
      v-loading="loading"
      :data="tableData"
      highlight-current-row
      border
      ><el-table-column
        label="顺序"
        prop="sort"
        min-width="100"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        label="炉批次号"
        prop="furnaceBatch"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="产品名称"
        prop="productName"
        min-width="100"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        label="产品图号"
        prop="productFigureNumber"
        min-width="100"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        label="生产日期"
        prop="productionDate"
        min-width="100"
        show-overflow-tooltip
        align="center"
      >
        <template #default="scope">
          {{ dayjs(scope.row.productionDate).format("YYYY-MM-DD") }}
        </template>
      </el-table-column>
      <el-table-column
        label="炉号"
        prop="equipName"
        min-width="100"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        label="计划状态"
        prop="planStatus"
        min-width="100"
        show-overflow-tooltip
        align="center"
      >
        <template #default="scope">
          {{ useDictionary("BiProductStatus", scope.row.planStatus) }}
        </template>
      </el-table-column>
      <el-table-column
        label="熔炉状态"
        prop="meltedStatus"
        min-width="100"
        show-overflow-tooltip
        align="center"
      >
        <template #default="scope">
          {{ useDictionary("BiProductStatus", scope.row.meltedStatus) }}
        </template>
      </el-table-column>
      <el-table-column
        label="造型状态"
        prop="modelingStatus"
        min-width="100"
        show-overflow-tooltip
        align="center"
      >
        <template #default="scope">
          {{ useDictionary("BiProductStatus", scope.row.modelingStatus) }}
        </template>
      </el-table-column>
      <el-table-column
        label="浇注状态"
        prop="pouringStatus"
        min-width="100"
        show-overflow-tooltip
        align="center"
      >
        <template #default="scope">
          {{ useDictionary("BiProductStatus", scope.row.pouringStatus) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="160" align="center">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            link
            @click="moveRowUp(scope.$index)"
            ><i-ep:arrow-up-bold />
            上移
          </el-button>
          <el-button
            type="primary"
            size="small"
            link
            @click="moveRowDown(scope.$index)"
            ><i-ep:arrow-down-bold />
            下移
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          v-if="!props.isReadonly"
          type="primary"
          :loading="loading"
          @click="handleSubmit"
          >确 定</el-button
        >
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary";
import { useDictionary, useTable } from "@/utils/useTable";
import dayjs from "dayjs";

const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "MESBIPRODUCTIONDATSORT",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  searchParam.productionDate = "";
  tableData.value = [];
  emit("change-visible", false);
}

/** 大屏生产数据保存提交 */
async function handleSubmit() {
  if (!tableData.value?.length) {
    ElMessage.warning("请修改数据");
    return;
  }
  loading.value = true;
  await request({
    url: "/mes/biproductiondata/updateSort",
    method: "post",
    data: tableData.value?.map(({ id, sort }) => ({ id, sort })),
  }).finally(() => {
    loading.value = false;
  });
  ElMessage.success(`调整顺序成功`);
  closeDialog();
  emit("reset-table");
}

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});

const searchParam = reactive({
  productionDate: "",
});

const loading = ref(false);

const tableData = ref([]);

const search = async () => {
  if (!searchParam.productionDate) {
    ElMessage.warning("请选择生产日期");
    return;
  }
  loading.value = true;
  await request({
    url: "/mes/biproductiondata/getList",
    method: "post",
    data: searchParam,
  })
    .then(({ data }) => {
      tableData.value = data;
    })
    .finally(() => {
      loading.value = false;
    });
};
const moveRowUp = (index: number) => {
  if (index > 0) {
    // 交换行
    const temp = tableData.value[index - 1];
    tableData.value[index - 1] = tableData.value[index];
    tableData.value[index] = temp;

    // 更新 sort 属性
    tableData.value[index - 1].sort = index;
    tableData.value[index].sort = index + 1;
  }
};

const moveRowDown = (index: number) => {
  if (index < tableData.value.length - 1) {
    // 交换行
    const temp = tableData.value[index + 1];
    tableData.value[index + 1] = tableData.value[index];
    tableData.value[index] = temp;

    // 更新 sort 属性
    tableData.value[index + 1].sort = index + 2;
    tableData.value[index].sort = index + 1;
  }
};
</script>
